
<!DOCTYPE html>
<html lang="zh-CN" ng-app>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">


    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="/libs/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/libs/dashboard.css" rel="stylesheet">
    <script type="text/javascript" src="/libs/angular.js"></script>

    <style type="text/css">
    table {
		width: 1000px;
		margin: 50px auto;
		border-collapse: collapse;
		table-layout: fixed;
	}
	td {
		border: 1px solid #666;
		height: 60px;
		text-align: center;
		line-height: 60px;
		position: relative;
	}
	.isSelected {
		background-color: pink !important;
	}

	.seat {
		background-color: #449d44;
	}
	.teacher {
		background-color: #31b0d5;
	}
	.guodao {
		background-color: #ec971f;
	}
	ul.youji {
		position: absolute;
		width: 200px;
		left: 0;
		top: 0;
		display: none;
		background-color: #fff;
		border: 1px solid #ccc;
	}

	ul.youji li {
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		text-align: center;
		cursor: pointer;

	}
	ul.youji li:hover {
		background-color: pink;
	}

	.table1 .bianji input {
		width: 100px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		outline: none;
	}
	* {
		margin: 0;
		padding: 0;
		list-style: none;
		/*vertical-align: */
	}

	.table1 td a {
		position: absolute;
		right: 10px;
		bottom: 0;
		height: 30px;
		line-height: 30px;
		display: none;
		text-decoration: none;
		font-size: 14px;
		color: #000;
  		font-weight: bold;
	}

	.table1 .bianji {
		width: 100px;
		margin: 0 auto;
	}
	.table1 .bianji input {
		display: none;
	}
	.table1 i {
		font-style: normal;
		font-size: 20px;
		color: #fff;
	
	}
	#show,#save, .checkbox {
		display: none;
	}

	.mask {
			width: 300px;
		
			background: rgba(0,0,0,0.5);
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index: 2000;
			display: none;
			align-items: center;
			justify-content: center;
			text-align: left;
			line-height: 20px;
		}
		.mask form{
			width: 400px;
			background: #fff;
			padding: 10px;
		}
		.alert {
			display: none;
		}
    </style>
   
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">AAA订座系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
          	<li><a href="/">首页</a></li>
            <li><a href="javascript:;">欢迎你,<%= username %></a></li>
            <li><a href="/loginout">退出登录</a></li>
            
          </ul>
            <div ng-show="<%= manger ? true : false %>">
               <form action="/search" class="navbar-form navbar-right">
                  <input type="text" name="name" class="form-control" placeholder="Search...">
              </form>
            </div>
          
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="/create">创建班级</a></li>
            <li><a href="/detail?act=m">位置管理</a></li>
            <li><a href="/allClass">班级管理</a></li>
            <li><a href="/quanxian?name=<%= username %>" onclick="quanxian()" ng-show="<%= username== 'admin' ? true : false;%>">权限管理</a></li>
          </ul>
       
         
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <div class="jumbotron">
			<form action="" id="create" class="form-inline">
				<div class="form-group">
				    <label for="cNo">班级编号</label>
				    <input type="number" class="form-control" id="cNo" placeholder="请输入班级编号">
				 </div>
				
				 <div class="form-group">
				    <label for="exampleInputName2">排数(行数)</label>
				    <input type="number" class="form-control" id="exampleInputName2" placeholder="请输入行数" value="7">
				 </div>
				 <div class="form-group">
				    <label for="exampleInputName3">列数</label>
				    <input type="number" class="form-control" id="exampleInputName3" placeholder="请输入列数" value="7">
				 </div>
		
				 <button type="submit" class="btn btn-default">创建班级</button>
				
				
			</form>
				<input type="button" class="btn btn-success" value="保存" id="save">
				<a class="btn btn-default" href="/detail?cNo=aaa89" id="show">查看</a>
				<div class="checkbox">
					<label>
						<input type="checkbox" id="selectAll"> 全选
					</label>
				</div>
			<table class="table1">
	
			</table>
			<!-- 成功失败 -->
			
				<div class="alert alert-warning alert-dismissible" role="alert">
				  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
				  	<span aria-hidden="true">&times;</span>
					</button>
				  <strong></strong> 
				</div>
			<ul class="youji">
				<li>添加</li>
				<li>教师机</li>
				<li>删除</li>
				<li>过道</li>
				<li>取消选中</li>
			</ul>
		</div>
          
      </div>
    </div>
    
  </body>
</html>
<script type="text/javascript" src="/libs/jquery-3.2.1.js"></script>

<script type="text/javascript">

	// 表格数据
	var dataArr = [];

	// 旧数据
	var oldArr = [];

	// 查看班级
	$('#show').click(function () {
		if (!$('#cNo').val()) {
			alert('请输入班级');
			return false;
		} else {
			this.href = '/detail?cNo=aaa'+$('#cNo').val();
		}
	});

	// 关闭预览
	$('#close').click(function () {
		$('.contain').hide();
	})

	

	// 生成座位
	$('#create').submit(function () {
		var str = '<%= classArr %>';
		var arr = str.split(',');
		if (!$('#cNo').val()) {
			alert('请输入班级');
			return false;
		}
		if (arr.indexOf($('#cNo').val()) != -1) {
			var s = confirm('该班级已经存在,确定继续创建吗?');
			if (!s) {
				return false;
			}
		}
		$('#save').show();
		$('.checkbox').show();
		$('.table1').empty();

		// 右击显示菜单
		$('.jumbotron').on('contextmenu',function (ev) {

			$('ul.youji').show();

			$('ul.youji').css({left: ev.clientX - $('.jumbotron').offset().left,top: ev.clientY - $('.jumbotron').offset().top});

			

			return false;
		});
		dataArr = [];
		oldArr = [];
		var r = Number($('#create input').eq(1).val());
		var c = Number($('#create input').eq(2).val());
		var count = 0;
		console.log(r,c)
		for (var i = 0;i < r;i++) {
			var x = '<tr>';

			for (var j = 0;j < c;j++) {
				var ss = `aaa${i.toString()+j.toString()}`;
				x = x+`<td><div class="bianji"><input type="text"><i class="name"></i></div><a href="javascript:;">编辑</a>
    <div class="mask">
    	<form action="" class=${ss}>
    		<span aria-hidden="true" class="pull-right closes">&times;</span>
			  <div class="form-group">
			    <label for="exampleInputEmail1">名字</label>
			    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="姓名" name="name">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputPassword1">咨询师</label>
			    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="咨询师" min="0" name="age">
			  </div>
			  <div class="form-group">
			  		<label>是否缴费</label>
			  		<input type="radio" name="sex" id="inlineRadio1" value="1">
				  	<label for="inlineRadio1">是</label>
					   
					<input type="radio" name="sex" id="inlineRadio2" value="0">
					<label  for="inlineRadio2">
					   否
					</label>
				</div>
			<button type="submit" class="btn btn-success">确认</button>
			
			<input type="button" class="btn btn-info cancelForm" value="取消" >
		</form>
    </div></td>`;

				count++;
				// 单元格数据
				
				dataArr.push({
					cellId: count,
					teacher: 0,
					guodao: 0,
					stu: 0,
					tName: '',
					sName: '',
					price: 1,
					zixun: '',
					rows: r,
					cols: c
				});
				oldArr.push({
					cellId: count,
					teacher: 0,
					guodao: 0,
					stu: 0,
					tName: '',
					sName: '',
					price: 1,
					zixun: '',
					rows: r,
					cols: c
				});
			}

			x += '</tr>';
			$('.table1').append(x);
		}
	
		// 选中单元格
		$('.table1 td').click(function () {
			
			$(this).toggleClass('isSelected');
			
		});
		// 编辑
		$('.table1 td a').click(function () {
			$(this).next().css({display: 'flex'});
			var r = $(this).parent().parent().index().toString();
			var c = $(this).parent().index().toString();
			var x = '.aaa'+r+c+' input[name="sex"]:checked';
			var form = $(this).next().children('form');
			// 名字
			var oldName = $(this).parent().children('.bianji').children('.name').html();
			var oldZixun = form.children('.form-group').eq(1).children('input').val();
			var oldPrice = $(x).val();
		
			// form.children('.form-group').eq(0).children('input');
			var stuName = $(this).parent().children('.bianji').children('.name').html();
			form.children('.form-group').eq(0).children('input').val(stuName);

			// 关闭
			$('.closes').click(function () {
				var form = $(this).parent();
				form.children('.form-group').eq(0).children('input').val(oldName);
				form.children('.form-group').eq(1).children('input').val(oldZixun);
				if (oldPrice) {
					form.children('.form-group').eq(2).children('input').eq(0).attr('checked','checked');
				} else {
					form.children('.form-group').eq(2).children('input').eq(1).attr('checked','checked');
				}
				
				$('.mask').hide();
			});
			// 取消
			$('.cancelForm').click(function () {
				var form = $(this).parent();
				form.children('.form-group').eq(0).children('input').val(oldName);
				form.children('.form-group').eq(1).children('input').val(oldZixun);
				if (oldPrice) {
					form.children('.form-group').eq(2).children('input').eq(0).attr('checked','checked');
				} else {
					form.children('.form-group').eq(2).children('input').eq(1).attr('checked','checked');
				}
				
				$('.mask').hide();
			});
			return false;
		});
		$('.mask form').submit(function () {
			var val = $(this).children('.form-group').eq(0).children('input').val();
			$(this).parent().parent().children('.bianji').children('.name').html(val);
	
			$(this).parent().hide();
			return false;
		});
		$('.mask').click(function (evt) {
			
			evt.stopPropagation();
		
		});
		$('i.name').click(function () {
			return false;
		});
		// 双击文字
		$('i.name').dblclick(function () {
			$('.table1 td a').hide();
			if ($(this).parent().parent().hasClass('seat') || $(this).parent().parent().hasClass('teacher')) {
				$(this).hide();
				$(this).prev().show();
				$(this).prev().val($(this).html());
				$(this).hide();
			} else {
				alert('只有定位的学员和教师机才能编辑');
			}
			
			return false;
		});

		

		

		// 关闭
		// $('.bianji span').click(function () {
		// 	$(this).parent().hide();
		// 	$(this).parent().next().show();
		// 	$(this).prev().val('');
		// 	$(this).parent().parent().children('.name').show();
		// 	return false;
		// });

		// 鼠标移入显示编辑按钮
		$('.table1 td').hover(function () {
			var flag1 =  $(this).hasClass('seat') || $(this).hasClass('teacher');
			if ($(this).children('.mask').css('display') == 'none' && flag1 && $(this).children('.bianji').children('input').css('display') == 'none') {
				$(this).children('a').show();
			}
			
		},function () {
			$(this).children('a').hide();
		});

		$('.table1 .bianji input').click(function () {
			return false;
		});
		// 编辑失去焦点
		$('.table1 .bianji input').blur(function () {
			$(this).hide();
			$(this).next().show();
			if ($(this).val()) {
				$(this).next().html($(this).val());
			}


			$(this).val('');

		});
		// 编辑里面点击确定
		$('.table1 .bianji input').keydown(function (ev) {
			if (ev.keyCode == 13) {
				$(this).hide();
				$(this).next().show();
				if ($(this).val()) {
					$(this).next().html($(this).val());
				}
				$(this).val('');
			}
			
		});

		// 
		$('.mask').css({width: $(document).width()});



		return false;
	});

	
	
	// 隐藏选项
	$(document).click(function () {
		$('ul.youji').hide();
	});

	var all = 'isSelected seat teacher guodao';

	$('ul.youji li').click(function () {
		// 添加
		if ($(this).index() == 0) {
			$.menu('seat');
		}
		// 教师机
		if ($(this).index() == 1) {
			$.menu('teacher');
		}
		// 取消订位/教师机
		if ($(this).index() == 2) {
			$('.table1 td').each(function () {
				if ($(this).hasClass('isSelected')) {
					$(this).removeClass(all);
					$(this).children('.bianji').children('.name').html('');
				}
			});
		}
		// 过道
		if ($(this).index() == 3) {
			$.menu('guodao');
		}
		// 取消选中
		if ($(this).index() == 4) {
			$('.table1 td').removeClass('isSelected');
		}
	});

	// 添加类名
	$.extend({
		menu: function (name) {
			$('.table1 td').each(function () {
				if ($(this).hasClass('isSelected')) {
					$(this).removeClass(all).addClass(name);
					$(this).children('.bianji').children('.name').html('');
				}
			});
		}
	});
	

	// 全选
	$('#selectAll').click(function () {
		if (this.checked) {
			$('.table1 td').addClass('isSelected');
		} else {
			$('.table1 td').removeClass('isSelected');
		}
		

	})
	

	// 数据产生
	$.extend({
		createData: function () {
				$('.table1 tr').each(function () {
				var zIndex = $(this).index();
				var l = $(this).children().length;
				$(this).children().each(function () {
					// 表格下标
					var sIndex = zIndex * l + $(this).index();

					// 数据还原
					for (var key in oldArr[sIndex]) {
							dataArr[sIndex][key] = oldArr[sIndex][key];	 
						}
					// 是否为添加
					if ($(this).hasClass('seat')) {
						
						dataArr[sIndex].sName = $(this).children('.bianji').children('.name').html();
						dataArr[sIndex].stu = 1;

					}
					// 是否为教师机
					if ($(this).hasClass('teacher')) {
						
						dataArr[sIndex].tName = $(this).children('.bianji').children('.name').html();
						dataArr[sIndex].teacher = 1;
					}

					// 是否为过道
					if ($(this).hasClass('guodao')) {
						
						dataArr[sIndex].sName = $(this).children('.bianji').children('.name').html();
						dataArr[sIndex].guodao = 1;
					}

					var maskForm = $(this).children('.mask').children('form').children('.form-group');
					// 咨询师
					dataArr[sIndex].zixun = maskForm.eq(1).children('input').val();

					var r = zIndex;
					var c = $(this).index();
					var x = '.aaa'+r+c+' input[name="sex"]:checked';
					if ($(x).val()) {
						// 是否缴费
						dataArr[sIndex].price = $(x).val();
					}
					
				
				});
			});

			return dataArr;
		}
	});

	// 保存
	$('#save').click(function () {
		$.createData();
		$.ajax({
				url: '/createClass',
				data: {cNo: 'aaa'+$('#cNo').val()},
				success: function (s) {
					if (!s.err) {
						$.each(dataArr,function (i,ele) {
							ele.cNo = 'aaa'+$('#cNo').val();
							$.ajax({
								url: '/addSeat',
								data: ele,
								success: function (aa) {
									// console.log(aa);
									if (!aa.err) {
										$('.alert').show().children('strong').html('创建成功');
										$('#show').show();
									} else {
										$('.alert').show().children('strong').html('创建失败');
									}
								}
							});
						});
					}
				}
			});
		
	});

	$('.close').click(function () {
		$('.alert').hide();
	});

	

	
</script>